<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>The Black sea Website Template | Home :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">	
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300italic,300,100italic,100,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>  
<!---- start-smooth-scrolling---->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
<!---end-smooth-scrolling-->
<!--start-top-nav-script-->
		<script>
			$(function() {
				var pull 		= $('#pull');
					menu 		= $('nav ul');
					menuHeight	= menu.height();
				$(pull).on('click', function(e) {
					e.preventDefault();
					menu.slideToggle();
				});
				$(window).resize(function(){
	        		var w = $(window).width();
	        		if(w > 320 && menu.is(':hidden')) {
	        			menu.removeAttr('style');
	        		}
	    		});
			});
		</script>
<!--End-top-nav-script-->
</head>
<body>
	<!--start-header-->
					<div class="header">
						<div class="container">
							<div class="logo">
								<a href="#"><img src="images/logo.png" alt=""></a>  
							</div>
							<!--start-top-nav-->
							 <nav class="top-nav">
								<ul class="top-nav">
									<li><a href="index.html">HOME</a></li>&nbsp;/
									<li><a href="about.html">ABOUT ME</a></li>&nbsp;/
									<li><a href="portfolio.html">PORTFOLIO</a></li>&nbsp;/
									<li><a href="index.html">CONTACT ME</a></li>
								</ul>
								<a href="#" id="pull"><img src="images/menu-icon.png" title="menu" /></a>
							</nav>
							<div class="clearfix"> </div>
						</div>
				</div>
		<!--End-header->
		<!--Slider-Starts-Here-->
				<script src="js/responsiveslides.min.js"></script>
			 <script>
			    // You can also use "$(window).load(function() {"
			    $(function () {
			      // Slideshow 4
			      $("#slider4").responsiveSlides({
			        auto: true,
			        pager: true,
			        nav: true,
			        speed: 500,
			        namespace: "callbacks",
			        before: function () {
			          $('.events').append("<li>before event fired.</li>");
			        },
			        after: function () {
			          $('.events').append("<li>after event fired.</li>");
			        }
			      });
			
			    });
			  </script>
			<!--End-slider-script-->
			<!--starts-about-->
			<div class="about">
				<div class="container">
					<div class="about-top">
						<h3>ABOUT</h3>
						<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu erat lacus, vel congue mauris.</P>
						<iframe src="//player.vimeo.com/video/65454943?title=0&amp;portrait=0&amp;color=ffffff" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
						</div>
						<div class="about-bottom">
							<div class="col-md-4 about-one">
								<span class="one"> </span>
								<h4>EUISMOD</h4>
								<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sed dolor.</p>
							</div>
							<div class="col-md-4 about-one">
								<span class="two"> </span>
								<h4>VESTIBULUM</h4>
								<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sed dolor.</p>
							</div>
							<div class="col-md-4 about-one">
								<span class="tre"> </span>
								<h4>FUSCE EUISMOD</h4>
								<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sed dolor.</p>
							</div>
							<div class="clearfix"> </div>
						</div>
				</div>
			</div>
			<!--End-about-->
			<!--Responsive-tabs-Starts-Here-->
	<div class="responsive-tabs" id="project">
		<div class="container">
			<div class="tabs-box clock wow bounceIn">
			<ul class="tabs-menu">
				<li><a href="#tab1">ABOUT WILD</a></li>
				<li><a href="#tab2">ADDITIONAL INFORMATION</a></li>
				<li><a href="#tab3">MORBI INTERDUM</a></li>
			</ul>
			<div class="clearfix"> </div>
			<div class="tab-grids">
				<div id="tab1" class="tab-grid">
						<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis Gravida id, est. Sed lectus. Praesent elementum hendrerit tortor.</p>
						<p>Lorem egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis Gravida id, est. Sed lectus. Praesent elementum hendrerit tortor.</p>
						<P>claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</P>
   				</div>
				<div id="tab2" class="tab-grid">
						<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing.</p>
						<p>Lorem egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis Gravida id, est.</p>
						<P>claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</P>
   				</div>
				<div id="tab3" class="tab-grid">
						<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue.</p>
						<p>Lorem egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing</p>
						<P>claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</P>
   				</div>
			</div>
			</div>
		</div>
		<!--Script-->
		<script src="js/jquery-1.11.0.min.js"></script>
		<script src="js/myscript.js"> </script>
`		<!--Script-->
	</div>
<!--Responsive-tabs-ends-Here-->
			<!--starts-footer-->
			<div class="footer">
				<div class="container">
					<div class="footer-main">
						<p>&copy 2014-Template by <a href="http://w3layouts.com/">w3layouts</a></p>
					</div>
				</div>
				<script type="text/javascript">
									$(document).ready(function() {
										/*
										var defaults = {
								  			containerID: 'toTop', // fading element id
											containerHoverID: 'toTopHover', // fading element hover id
											scrollSpeed: 1200,
											easingType: 'linear' 
								 		};
										*/
										
										$().UItoTop({ easingType: 'easeOutQuart' });
										
									});
								</script>
					<a href="#home" id="toTop" class="scroll" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
			</div>
			<!--End-footer-->
</body>
</html>